---
title: Tailwind CSS Typography - Components Library @David UI
description: Enhance text layouts with Tailwind CSS typography components. Customizable styles for headers, paragraphs, and more ensure readability.
github: typography
prev: docs/react/tooltip
next: docs/react/video
---

# Tailwind CSS Typography

Enhance text aesthetics with David UI’s typography component. Built with Tailwind CSS, it supports headers, paragraphs, and more to improve readability. 

Check our component examples to implement fast beautiful and responsive text layouts.

---

## Headings

A hierarchy of headings ranging from `<h1>` to `<h6>`. Each heading features a bold font with a modern sans-serif style. They scale responsively, adjusting size for different screen breakpoints (`md` and `lg`) for optimal readability.

<PreviewWithCode relativePath="typography/headings.tsx" language="html" /> 

---

## Paragraph

A standard text block styled for body content with a sans-serif font and a comfortable text size. Suitable for general-purpose text and descriptions, it ensures clarity and readability.

<PreviewWithCode relativePath="typography/paragraph.tsx" language="html" />

---

## Lead Paragraph

An enlarged paragraph for drawing attention to introductory or important content. The slightly larger text size compared to standard paragraphs makes it ideal for highlighting key information or summaries.

<PreviewWithCode relativePath="typography/lead-paragraph.tsx" language="html" />

---

## Small Text

A smaller text size for secondary or less prominent information. It retains readability while ensuring it doesn’t overpower primary content. Ideal for disclaimers, notes, or supplementary details.

<PreviewWithCode relativePath="typography/small-text.tsx" language="html" />

---

## Typography Colors

A demonstration of text styling with various colors, including neutral (`slate-800` and `slate-200`) and accent colors (`blue-500`, `green-500`, `amber-500`, and `red-500`). This component shows how color variations can be applied to emphasize or categorize content visually. Each text maintains a bold, sans-serif font with responsive scaling for different screen sizes.

<PreviewWithCode relativePath="typography/typography-colors.tsx" language="html" />
